<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   
    <div id="app">
        <h1> {{msg1}} </h1>
        <h1> {{msg2}}</h1>
        <p v-html="msg3"></p>
        <div>
        <input type="button" value="xxxxxx" :title="msg4 + '我是酱油'" @click="click1"></input>
        </div>
        <div>
                <input type="text" v-model="msg6" />
        </div>
        <div>
                <input type="text" v-model="msg6"/>
        </div>
        
        <h1>{{msg7}}</h1>
        <h1>{{msg8}}</h1>
        <h1 :style="styleObj2">{{msg9}}</h1>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg1: '1.MVC和MVVM的区别',
                msg2: '2.学习了Vue中基本的代码结构',
                msg3: '<h1>3.插值表达式v-cloak v-text v-html v-bind v-on v-model v-for v-if v-show</h1>',
                msg4: '4.事件修饰符： .stop .prevent .capture .self .once',
                msg5: '5.el 指定要控制的区域 data 是个对象，指定了控制的区域要用到的数据 methods虽然带了个s后缀，但是是一个对象，这里可以自定义方法',
                msg6: '6.在vm实例中，如果要访问data上的数据，或者要访问methods中的方法，必须要带this',
                msg7: '7.在v-for中使用key属性',
                msg8: '8.v-model 只能应用于表单元素',
                msg9: '9.在vue中绑定样式两种方式 v-bind:class v-bind:style',
                styleObj2: {'font-style': 'italic'}

            },
            methods: {
                click1:function(){
                    alert(this.msg5)
                }
            }
        });
    </script>
</body>
</html>